<template>
	<view class='recharge-wrapper'>
		<!-- 返回首页 -->
		<!-- <uni-bankhome /> -->
		<div class="content-box">
			<view class="-list">
				<view class="title">充值焕贝</view>
				<view class="content">
					<view class="price">
						<span style="margin-right:5px;"></span>
						<div class="money">
							<span>{{price}}</span>
							<span class="line"></span>
						</div>
					</view>
				</view>
				<view class="content yb">
					<view class="price">
						<span>¥</span>
						<div>{{priceRMB}}</div>
					</view>
				</view>
			</view>
			<div class="money-list">
				<div class="money-item" @click='setPrice(30)'>
					<div class="rmb">30焕贝</div>
				</div>
				<div class="money-item" @click='setPrice(50)'>
					<div class="rmb">50焕贝</div>
				</div>
				<div class="money-item" @click='setPrice(100)'>
					<div class="rmb">100焕贝</div>
				</div>
				<div class="money-item" @click='setPrice(200)'>
					<div class="rmb">200焕贝</div>
				</div>
				<div class="money-item" @click='setPrice(300)'>
					<div class="rmb">300焕贝</div>
				</div>
				<div class="money-item" @click='setPrice(500)'>
					<div class="rmb">500焕贝</div>
				</div>
			</div>
			<div class="tip-wrapper" v-if="currentVip">
				<div class="tip-title">{{vipRate[currentVip].name||''}}权益：</div>
				<div class="tip-content">
					恭喜您成为{{projectName}}{{vipRate[currentVip].name||''}}。
				</div>
				<div class="tip-content">
					您将按{{vipRate[currentVip].rate|rateTen}}折人民币充值兑换“焕贝”（{{vipRate[currentVip].rate|rateTen|rateTen}}元人民币兑换100焕贝）。当您用“焕贝”在{{projectName}}平台线上购物和线下商圈会员门店消费时，您都可以无条件尊享{{vipRate[currentVip].rate|rateTen}}折优惠。
				</div>
				<div class="tip-content">
					平台将扣除您{{vipRate[currentVip].money}}焕贝，作为您的{{vipRate[currentVip].name||''}}年费，余额将自动转入您的焕贝钱包余额。
				</div>
			</div>
		</div>
		<div class="jsq-wrapper">
			<div class="flex">
				<div class="box one">
					<div class="inner" @click="operate(1)">1</div>
				</div>
				<div class="box two">
					<div class="inner" @click="operate(2)">2</div>
				</div>
				<div class="box three">
					<div class="inner" @click="operate(3)">3</div>
				</div>
				<div class="box del">
					<div class="inner" @click="operate('del')">删除</div>
				</div>
			</div>
			<div class="flex">
				<div class="flex-75">
					<div class="flex">
						<div class="box four">
							<div class="inner" @click="operate(4)">4</div>
						</div>
						<div class="box five">
							<div class="inner" @click="operate(5)">5</div>
						</div>
						<div class="box six">
							<div class="inner" @click="operate(6)">6</div>
						</div>
					</div>
					<div class="flex">
						<div class="box seven">
							<div class="inner" @click="operate(7)">7</div>
						</div>
						<div class="box eight">
							<div class="inner" @click="operate(8)">8</div>
						</div>
						<div class="box nine">
							<div class="inner" @click="operate(9)">9</div>
						</div>
					</div>
					<div class="flex">
						<div class="box zero">
							<div class="inner" @click="operate(0)">0</div>
						</div>
						<div class="box dian">
							<div class="inner" @click="operate('.')">.</div>
						</div>
					</div>
				</div>
				<div class="box pay">
					<div class="inner" @click="handlerRecharge">充值</div>
				</div>
			</div>
		</div>
		<pay-methods finish="refresh" closeTip='1' type="RECHARGE" @payFinish="payFinish" ref="payMethods">
		</pay-methods>
	</view>
</template>
<script>
	import {
		Recharge,
		RateSetting,
		CreatePartner,
		getUserInfo
	} from "@/api/members";
	import BigNumber from 'bignumber.js'
	import storage from "@/utils/storage.js";
	import config from '@/config/config'
	import payMethods from "@/components/pay-methods/pay-methods.vue"
	import * as API_Trade from "@/api/trade";
	export default {
		data() {
			return {
				// 授权信息展示，商城名称
				projectName: config.name,
				price: "",
				priceRMB: 0,
				flag: true,
				currentVip: '', //是否是充值会员
				vipRate: '',
				rate: ''
			};
		},
		components: {
			payMethods
		},
		watch: {
			price(val) {
				if (val > 0) {
					val = new BigNumber(val)
					this.priceRMB = val.multipliedBy(this.rate).dp(2, BigNumber.ROUND_DOWN)
				} else {
					this.priceRMB = 0;
				}
			},
		},
		onLoad(options) {
			this.rechargeType = '4'
			this.initHL()
			this.currentVip = options.vip || ''
			this.orderType = options.orderType || ''
			if (this.currentVip == '1') {
				this.rechargeType = '43'
				this.setPrice(this.vipRate['1'].money)
				this.rate = this.vipRate['1'].rate
			}
			if (this.currentVip == '2') {
				this.rechargeType = '44'
				this.setPrice(this.vipRate['2'].money)
				this.rate = this.vipRate['2'].rate
			}
			//初始化参数
			// #ifdef APP-PLUS
			this.paymentType = "APP";
			this.paymentClient = "APP";
			//#endif
			// #ifdef MP-WEIXIN
			this.paymentType = "WECHAT_MP";
			this.paymentClient = "MP";
			//#endif
			// #ifdef H5
			this.paymentType = "H5";
			//如果是微信浏览器，则使用公众号支付，否则使用h5，
			// 区别是：h5是通过浏览器外部调用微信app进行支付，而JSAPI则是 在微信浏览器内部，或者小程序 调用微信支付
			this.paymentClient = this.isWeiXin() ? "JSAPI" : "H5";
			//#endif
		},
		methods: {
			operate(param) {
				if (param == 'pay') {
					return
				}
				if (param == 'del') {
					if (this.price.length > 0) {
						this.price = this.price.slice(0, this.price.length - 1)
					}
					return
				}
				let money = this.price + param + ''
				if ((/^([1-9]\d{0,9}|0)([.]?|(\.\d{1,2})?)$/.test(money)) == true) {
					this.price = money
				} else {
					return
				}
			},
			initHL() {
				let rate = storage.getVipRate();
				this.vipRate = rate
				this.userInfo = this.$options.filters.isLogin();
				if (this.userInfo.gradeName && rate[this.userInfo.gradeName].rate) {
					this.rate = rate[this.userInfo.gradeName].rate
				} else {
					this.rate = rate['0'].rate
				}
			},
			setPrice(price) {
				this.price = price + ''
			},
			// 充值
			handlerRecharge() {
				let that = this
				if (this.currentVip) {
					let needMoney = new BigNumber(this.vipRate[this.currentVip].money)
					if (new BigNumber(this.price).lt(needMoney)) {
						uni.showToast({
							icon: "none",
							title: "充值金额不足以支付会员费用，请修改金额"
						})
						return
					}
				}
				if (this.price > 0) {
					let params = {
						rechargeType: this.rechargeType,
						price: this.priceRMB.toNumber(),
						hbPrice: this.price,
					}
					if (this.currentVip) {
						params.vipPrice = this.vipRate[this.currentVip].money
					}
					this.$refs.payMethods.payChoose('wechat', params)
				}
			},
			// 充值成功回调
			payFinish(params) {
				if (this.orderType === "ORDER") {
					uni.navigateBack({
						delta: -2
					})
				} else if (this.currentVip !== '') {
					uni.navigateTo({
						url: "/pages/cart/payment/success?" +
							"paymentMethod=" + params.paymentMethod +
							"&payPrice=" + params.payPrice +
							"&orderType=" + params.orderType
					});
				} else {
					uni.navigateTo({
						url: "/pages/cart/payment/success?" +
							"paymentMethod=" + params.paymentMethod +
							"&payPrice=" + params.payPrice +
							"&orderType=" + params.orderType
					});
				}
			}
		},
	};
</script>
<style lang="scss" scoped>
	@import './style.scss';
</style>
